import React, { PureComponent } from 'react'
import { StyleSheet, View, Image, Text, ImageBackground, FlatList, TouchableOpacity, Modal, } from 'react-native'
import { screen, system } from '../../../../common'

type Props = {
    show: boolean,
}
type State = {
    showView: boolean,
}

const gogrouppurchaseInfo = { 
    ownerName: '卓别林',
    ownerImage: require('../../../../img/home/icon_homepage_beauty_category.png'), 
    needMemberCount: '2', 
    endTime: '1546271999000', 
    memberList: [
        { memberName: '老许', memberImage: require('../../../../img/home/icon_homepage_default.png') }, 
        { memberName: '老沈', memberImage: require('../../../../img/home/icon_homepage_entertainment_category.png') },
        { memberName: '老李', memberImage: require('../../../../img/home/icon_homepage_food_category.png') },
        { memberName: '小魏', memberImage: require('../../../../img/home/icon_homepage_foottreat_category.png') },
        { memberName: '老湛', memberImage: require('../../../../img/home/icon_homepage_hotel_category.png') },
        { memberName: '小许', memberImage: require('../../../../img/home/icon_homepage_ktv_category.png') },
    ] 
}


class GoGroupPurchase extends PureComponent<Props, State>{

    constructor(props: Object) {
        super(props)

        this.state = {
            showView: false
        }
    }

    getEndTime() {
        //单位毫秒
        let time = parseFloat(gogrouppurchaseInfo.endTime) - parseFloat(new Date().getTime())
        let hours = Math.floor(time / 3600000)
        let minutes = Math.floor((time % 3600000) / 60000)
        let seconds = Math.floor((time % 60000) / 1000)
        return hours + ':' + minutes + ':' + seconds
    }


    //更改showView的值
    _setModalVisible() {
        let isShow = this.state.showView;
        this.setState({
            showView: !isShow,
        })

    }

    headPortraitView() {
        let headPortraitNumber = gogrouppurchaseInfo.memberList.length
        let i = 0
        let list=[]
        if (headPortraitNumber > 4) {
            i = 4
        } else {
            i = headPortraitNumber
        }
        for (let j = 0; j < i; j++) {
            list.push(<Image key={j} source={gogrouppurchaseInfo.memberList[j].memberImage} style={styles.ownerImageStyle} />)
        }
        if (headPortraitNumber > 4) {
            list.push(<Text key={5}style={{fontSize:30,fontWeight: 'bold',}}>····</Text>)
        }
        return list
    }

    render() {
        //控制是否显示
        let isShowView = this.state.showView != this.props.show
        return (
            <Modal
                animationType='slide'
                transparent={true}
                visible={isShowView}
                onShow={() => { }}
                onRequestClose={() => { }}>
                {/*整个弹框的样式，包括可见和不可见得部分*/}
                <View style={styles.container}>
                    {/*弹框可见部分的样式*/}
                    <View style={styles.moadlStyle}>
                        {/*主标题和叉号的样式(头样式)*/}
                        <View style={styles.headStyle}>
                            {/*主标题的样式*/}
                            <Text style={styles.titleStyle}>
                                参与{gogrouppurchaseInfo.ownerName}的拼单
                            </Text>
                            <View flex={1} />
                            {/*叉号的样式*/}
                            <TouchableOpacity
                                style={{ alignSelf: 'flex-start', }}
                                onPress={() => {
                                    this._setModalVisible()
                                }}
                            >
                                <Image source={require('../../../../img/public/exit.png')} style={styles.exitStyle} />
                            </TouchableOpacity>
                        </View>
                        {/*副标题和剩余时间的样式*/}
                        <Text style={styles.subtitleStyle}>
                            仅剩{gogrouppurchaseInfo.needMemberCount}个名额,{this.getEndTime()}后结束
                        </Text>
                        {/*头像部分的样式*/}
                        <View style={styles.headPortraitStyle}>
                            {/*团主头像*/}
                            <Image source={gogrouppurchaseInfo.ownerImage} style={styles.ownerImageStyle} />
                            {/*团员头像*/}
                            <View style={styles.memberStyle}>
                                {this.headPortraitView()}
                            </View>
                        </View>
                        {/*按钮的样式*/}
                        <TouchableOpacity
                            style={styles.buttonStyle}
                            onPress={() => {
                                this._setModalVisible()
                            }}
                        >
                            <Text style={styles.buttonTextStyle}>
                                参与拼团
                            </Text>
                        </TouchableOpacity>

                    </View>
                </View>
            </Modal>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        alignItems: 'center',
        justifyContent: 'center',
        flex: 1,
    },
    moadlStyle: {
        // marginLeft: 70,
        // marginRight: 70,
        backgroundColor: 'white',
        // alignSelf: 'stretch',
        justifyContent: 'center',
        borderRadius: 10,
        borderWidth: 0.5,
        borderColor: '#ccc',
        alignItems: 'center',
        height: screen.height / 4,
        width: screen.width * 0.8
    },
    headStyle: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        // width: screen.width - 140,
        height: screen.height * 0.04,
        marginTop: screen.height/80,
        marginBottom: screen.height/140,
        // backgroundColor: 'yellow',
    },
    titleStyle: {
        fontSize: 24,
        // fontWeight: 'bold',
        // alignItems: 'center',
        // justifyContent: 'center',
        //width: (screen.width - 140) * 9 / 10,
        // backgroundColor: 'red',
        marginLeft: screen.width * 0.24,
        color:'black',
    },
    exitStyle: {
        //marginLeft: 10,
        marginRight: screen.width/30,
        //marginTop: 5,
        alignSelf: 'flex-start',
        width: screen.width*0.05,
        height: screen.width*0.05,
        // backgroundColor: 'blue',
    },
    subtitleStyle: {
        alignItems: 'center',
        justifyContent: 'center',
        //width: screen.width - 140,
        height: screen.height / 35,
        marginTop: screen.height/300,
        marginBottom: screen.height/500,
        fontSize: 15,
    },
    headPortraitStyle: {
        alignItems: 'center',
        justifyContent: 'center',
        height: screen.height * 0.1,
        flexDirection: 'row',
        // backgroundColor: 'yellow',
    },
    ownerImageStyle: {
        marginLeft:screen.width/50,
        height: screen.width / 8,
        width: screen.width / 8,
        borderRadius: 45,
        // backgroundColor: 'red',
        // borderWidth: 1,
        // borderColor: 'red'
    },
    memberStyle:{
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
    },
    buttonStyle: {
        alignItems: 'center',
        justifyContent: 'center',
        //backgroundColor:'red',
        height: screen.height * 0.035,
        width: screen.width / 2,
        borderRadius: 5,
        borderWidth: 1.5,
        borderColor: '#C0C0C0'
    },
    buttonTextStyle: {
        fontSize: 20,
        color:'black',
    },

})
export default GoGroupPurchase